/**
 * @author [siwi]
 * @email [siwi@siwi.me]
 * @create date 2017-04-28 05:24:08
 * @modify date 2017-04-28 05:26:26
 * @desc [variables for Siwi UI]
*/

/*--------------------------------------------------------
                        Base font-size
---------------------------------------------------------*/

@css-prefix                       : sw-;
@font-size-base                   : 14px;
@font-size-sm                     : 12px;
@font-size-lg                     : 16px;
@font-family                      : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
@code-family                      : Consolas,Menlo,Courier,monospace;
@line-height-base                 : 1.5;
@line-height-computed             : floor((@font-size-base * @line-height-base));

/*--------------------------------------------------------
                        Layout And Grid
---------------------------------------------------------*/

@grid-columns                     : 24;
@grid-gutter-width                : 0;
@grid-row-prefix                  : row-;
@grid-column-prefix               : col-;


/*--------------------------------------------------------
                  Media queries breakpoints
---------------------------------------------------------*/

@screen-xs                        : 480px;
@screen-xs-min                    : @screen-xs;
@screen-xs-max                    : (@screen-xs-min - 1);
@screen-sm                        : 768px;
@screen-sm-min                    : @screen-sm;
@screen-sm-max                    : (@screen-sm-min - 1);
@screen-md                        : 992px;
@screen-md-min                    : @screen-md;
@screen-dm-max                    : (@screen-md-min - 1);
@screen-lg                        : 1200px;
@screen-lg-min                    : @screen-lg;
@screen-lg-max                    : (@screen-lg-min - 1);
@screen-2x                        : 1440px;
@screen-2x-min                    : @screen-2x;
@screen-2x-max                    : (@screen-2x-min - 1);

/*--------------------------------------------------------
                        Site Colors
---------------------------------------------------------*/

/*---------------------  Colors  ------------------------*/

@red                              : #DB2828;
@orange                           : #F2711C;
@yellow                           : #FBBD08;
@olive                            : #B5CC18;
@green                            : #21BA45;
@teal                             : #00B5AD;
@blue                             : #2185D0;
@violet                           : #6435C9;
@purple                           : #A333C8;
@pink                             : #E03997;
@brown                            : #A5673F;
@grey                             : #767676;
@black                            : #1B1C1D;

/*------------------  Light Colors  -------------------*/

@light-red                        : #FF695E;
@light-orange                     : #FF851B;
@light-yellow                     : #FFE21F;
@light-olive                      : #D9E778;
@light-green                      : #2ECC40;
@light-teal                       : #6DFFFF;
@light-blue                       : #54C8FF;
@light-violet                     : #A291FB;
@light-purple                     : #DC73FF;
@light-pink                       : #FF8EDF;
@light-brown                      : #D67C1C;
@light-grey                       : #DCDDDE;
@light-black                      : #545454;

/*-------------------   Neutrals  ---------------------*/

@full-black                       : #000000;
@off-white                        : #F9FAFB;
@dark-white                       : #F3F4F5;
@mid-white                        : #DCDDDE;
@white                            : #FFFFFF;

/*--------------- Colored Backgrounds ----------------*/

@red-background                   : #FFE8E6;
@orange-background                : #FFEDDE;
@yellow-background                : #FFF8DB;
@olive-background                 : #FBFDEF;
@green-background                 : #E5F9E7;
@teal-background                  : #E1F7F7;
@blue-background                  : #DFF0FF;
@violet-background                : #EAE7FF;
@purple-background                : #F6E7FF;
@pink-background                  : #FFE3FB;
@brown-background                 : #F1E2D3;

/*--------------------------------------------------------
                        Border
---------------------------------------------------------*/

@border-radius-base               : 6px;
@border-radius-small              : 4px;
@border-radius                    : 1px;
@border-color                     : rgba(34, 36, 38, 0.15);
@strong-border-color              : rgba(34, 36, 38, 0.22);
@internal-border-color            : rgba(34, 36, 38, 0.1);
@disabled-border-color            : rgba(34, 36, 38, 0.5);

/*--------------------------------------------------------
                        Button
---------------------------------------------------------*/

@btn-font-weight                  : normal;
@btn-padding-base                 : 6px 15px;
@btn-padding-large                : 6px 15px 7px 15px;
@btn-padding-small                : 2px 7px;

/*--------------------------------------------------------
                        Input
---------------------------------------------------------*/

@input-height-base                : 32px;
@input-height-large               : 36px;
@input-height-small               : 24px;
@input-padding-horizontal         : 7px;
@input-padding-vertical-base      : 4px;
@input-padding-vertical-small     : 1px;
@input-padding-vertical-large     : 6px;
@input-background                 : @white;
@input-color                      : @light-black;
@input-border-color               : @border-color;
@input-hover-border-color         : lighten(@light-blue, 20%);
@input-placeholder-color          : @light-grey;
@input-disabled-bg                : @mid-white;
/*--------------------------------------------------------
                        Animate
---------------------------------------------------------*/

@animation-time                   : .3s;
@transition-time                  : .2s;
@ease-in-out                      : ease-in-out;

/*--------------------------------------------------------
                        Shadow
---------------------------------------------------------*/

@shadow-color                     : rgba(0, 0, 0, .2);
@shadow-base                      : @shadow-down;
@shadow-up                        : 0 -1px 6px @shadow-color;
@shadow-down                      : 0 1px 6px @shadow-color;
@shadow-left                      : -1px 0 6px @shadow-color;
@shadow-right                     : 1px 0 6px @shadow-color;

/*--------------------------------------------------------
                        Z-index
---------------------------------------------------------*/

@zindex-spin                      : 8;
@zindex-affix                     : 10;
@zindex-back-top                  : 10;
@zindex-select                    : 900;
@zindex-modal                     : 1000;
@zindex-message                   : 1010;
@zindex-notification              : 1010;
@zindex-tooltip                   : 1060;
@zindex-loading-bar               : 2000;
